<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理登录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- inline styles related to this page -->
    <!-- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>-->
     <!-- ace settings handler -->
    <style type="text/css">
        #banner { position: relative; width: 1530px; height: 600px; border: 0px solid #666; overflow: hidden;
            position:fixed; top:9.5%;}
        #banner_list img { border: 0px; }
        #banner_info { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer }
        #banner_text { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; }
        #banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 650px; }
        #banner ul li { padding: 0px 18px; float: left; display: block; color: #FFF; background: #a3998d; cursor: pointer; border: 1px solid #f6f3f3; }
        #banner ul li.on { background-color: #000; }
        #banner_list a { position: absolute; }
        <!--
        让四张图片都可以重叠在一起-->
    </style>
<style type="text/css">
    #navLog
    { position:fixed;
        bottom:90%; left:10%;
    }
    #loginGO{
        background-color: white;
        padding:1.5% 3% 9% 3%;
        position:fixed;
        bottom:30%; left:65%;
    }

    .footer{
        background-color: #5b656d;
        padding:0% 36.5% 0% 37%;
        position:fixed;
        bottom:0%; left:0%;
    }
</style>
</head>

<body>
<!--log信息 -->    
<h4 style="font-family: 楷体" id="navLog">
    <img src="../static/images/jingmenEdu.jpg"/><tr>欢迎来到管理系统</tr></h4>
</h4>

<!--banner的头-->
<div id="banner">
    <div id="banner_bg">
    </div>
    <!--标题背景-->
    <div id="banner_info">
    </div>
    <!--标题-->
    <ul>
        <li class="on">
            1
        </li>
        <li>
            2
        </li>
        <li>
            3
        </li>
        <li>
            4
        </li>
    </ul>
    <div id="banner_list">
        <a href="#" target="_blank"><img src="../static/images/banner-login.jpg"></a>
        <a href="#" target="_blank"><img src="../static/images/banner1.jpg"></a>
        <a href="#" target="_blank"><img src="../static/images/banner2.jpg"></a>
        <a href="#" target="_blank"><img src="../static/images/banner3.jpg"></a>
    </div>

</div>
<div id="loginGO">
<form method="post">
    <!--用户名-->
    <div style="text-align: center">
        <h5>用户登录</h5>
    </div>
   <p>&nbsp;</p>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">
                <!--输入框钱前面的人头像-->
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                </svg>
            </span>
        </div>
        <input type="text" id="loginName" name="loginName" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>

    <!--密码-->
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon2">
                <!--输入框钱前面的人头像-->
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-unlock-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M.5 9a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2V9z"/>
                         <path fill-rule="evenodd" d="M8.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
                </svg>
            </span>
        </div>
        <input type="password" id="password" name="password" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
    <p>&nbsp;</p>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary btn-sm btn-block" id="LoginGOTO">登录</button>
</form>
</div>

<div class="footer">
    <div class="footer-txt">
        <p>
            <span class="mr">版权所有©2020-2099</span>
            <span>余代宸个人开源，githup And 码云</span>
        </p>
        <p>
            <span class="mr">京ICP备05020493号-4</span>
            <span class="mr">|</span>
            <span>京ICP证150437号</span>
        </p>
    </div>
</div>




<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script>
    $('#LoginGOTO').click(function setCookie(){
        var elementById =$(" #loginName ").val();
        var password =$(" #password ").val();
        $.cookie('LoginName',elementById, {expires:7,path:'/'});
        $.ajax({
            type : "post",
            url: "/login",
            data: JSON.stringify({password:password,loginName:elementById}),//必须
            contentType : "application/json;charsetset=UTF-8",//必须
            dataType:"json",//必须
            success: function (data) {
                if(data.code==20000){
                    console.log(data)
              window.location.href="/index";}
                else
                    alert(data.method);
            },
            error: function(data){
                console.log(data.data.message);
            }
        });
    })
</script>
<!--jquery控制的走马灯Banner-->
<script type="text/javascript">
    var t = n = 0,
        count;
    $(document).ready(function() {
        count = $("#banner_list a").length;
        $("#banner_list a:not(:first-child)").hide();
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
        $("#banner_info").click(function() {
            window.open($("#banner_list a:first-child").attr('href'), "_blank")
        });
        $("#banner li").click(function() {
            var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4
            n = i;
            if (i >= count) return;
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
            $("#banner_info").unbind().click(function() {
                window.open($("#banner_list a").eq(i).attr('href'), "_blank")
            })
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
            document.getElementById("banner").style.background = "";
            $(this).toggleClass("on");
            $(this).siblings().removeAttr("class");
        });
        t = setInterval("showAuto()", 4000);
        $("#banner").hover(function() {
                clearInterval(t)
            },
            function() {
                t = setInterval("showAuto()", 4000);
            });
    })

    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }
</script>

</body>
</html>